<template>
  <cv-dialog-form
    v-model:show="show"
    title="添加菜单"
    @confirm="addDataService"
  >
    <cv-form :config="form" :data="formData">
      <template #parent>
        <div>{{ parentInfo.title }}</div>
      </template>
    </cv-form>
  </cv-dialog-form>
</template>
<script setup lang="ts">
import type { FormConfig } from '@/packages/components'
import { addReq, queryReq, pageQueryReq, updateReq } from '@/utils/http/code'
import { useVModels } from '@vueuse/core'
import {} from '@/api/goods/admin-catrgory'
import { PropType } from 'vue'
import {
  type MenuTree,
  type AddShopAdminPermission,
  addShopAdminPermission,
} from '@/api/system'

const emit = defineEmits(['update:show', 'refreshData'])
const props = defineProps({
  /**
   * 是否显示弹窗
   */
  show: {
    type: Boolean,
    default: false,
  },

  parentInfo: {
    type: Object as PropType<MenuTree>,
    default: () => {
      return {}
    },
  },
})
const { parentInfo } = toRefs(props)
const { show } = useVModels(props)

watch(
  () => show.value,
  () => {
    if (show.value) {
      formData.value.parentId = parentInfo.value.id
      formData.value.level = parentInfo.value.level + 1
      if (parentInfo.value.level === 2) {
        formData.value.type = 2
      } else {
        formData.value.type = 1
      }
    }
  }
)

/**
 * 添加数据
 */
const addDataService = async (
  data: AddShopAdminPermission,
  close: Function
) => {
  const res = await addShopAdminPermission(data)
  addReq(res, () => {
    //刷新表格数据
    emit('refreshData')
    //关闭弹窗
    close()
  })
}

const formData = ref<AddShopAdminPermission>({
  type: 1,
  parentId: 6,
  title: '6666666',
  path: '',
  name: '',
  component: '',
  redirect: '',
  level: 0,
  icon: '',
  meta: '',
  state: 1,
  mark: '',
  sort: 1,
  isShow: 1,
})
/**
 *数据添加
 */
const form = reactive<FormConfig<AddShopAdminPermission>>({
  items: [
    {
      type: 'slot',
      prop: 'parentId',
      label: '上级名称',
      slotName: 'parent',
    },
    {
      type: 'input',
      prop: 'title',
      label: '菜单名称',
      rules: {
        required: true,
        type: 'string',
        max: 10,
      },
    },

    {
      type: 'input',
      prop: 'path',
      label: '路径',
      rules: {
        required: true,
        type: 'string',
      },
    },

    {
      type: 'input',
      prop: 'name',
      label: '路由名称',
      rules: {
        required: true,
        type: 'string',
      },
      showCallback: (row) => {
        return parentInfo.value.level === 2
      },
    },

    {
      type: 'input',
      prop: 'component',
      label: '组件地址',
      rules: {
        required: true,
        type: 'string',
      },
      showCallback: (row) => {
        return parentInfo.value.level === 2
      },
    },

    {
      type: 'input-number',
      prop: 'sort',
      label: '排序',
    },
    {
      type: 'switch',
      prop: 'state',
      label: '状态',
      rules: { required: false },
    },

    {
      type: 'switch',
      prop: 'isShow',
      label: '是否显示',
      rules: { required: false },
    },
  ],
})
</script>
<style lang="scss" scoped></style>
